<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片滚屏效果 - 智能课堂</title>
		<link href="css/zns_style.css" rel="stylesheet" type="text/css" />
		
		<script>
			window.onload = function()
			{
				let u = document.querySelector('ul');
				
				u.innerHTML += u.innerHTML;
				
				let lis = document.querySelectorAll('li');
				u.style.width = lis[0].offsetWidth * lis.length + 'px';
				
				let timer;
				let i = 1;
				
				// 图片循环滚动
				function StartMove()
				{
					timer = setInterval(function(){
						u.style.left = u.offsetLeft - i + 'px';
						if(i == 1)
						{
							if(u.offsetLeft == -u.offsetWidth / 2)
							{
								u.style.left = 0;
							}
						}
						
						if(i == -1)
						{
							if(u.offsetLeft == 0)
							{
								u.style.left = -u.offsetWidth / 2 + 'px';
							}
						}
					},30);
				}
				
				StartMove();
				
				// 鼠标移入停
				u.onmouseover = function()
				{
					clearInterval(timer);
				}
				
				// 鼠标移出动
				u.onmouseout = function()
				{
					StartMove();
				}
				
				
				let left = document.querySelector('.btn_left');
				let right = document.querySelector('.btn_right');
				
				left.onmouseover = function()
				{
					i = 1;
				}
				
				right.onmouseover = function()
				{
					i = -1;
				}
				
				let select = document.querySelector('#sel_speed');
				select.onchange = function()
				{
					if(select.innerHTML == '慢')
					{
						i = 100 + 'px';
					}
					else if(select.innerHTML == '中')
					{
						i = 1000 + 'px';
					}
					else if(select.innerHTML == '快')
					{
						i = 3000 + 'px';
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="control">
			<label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label>
			<select id="pause_time">
				<option value="100">短</option>
				<option value="1000" selected="selected">中</option>
				<option value="3000">长</option>
			</select>

			滚动速度：
			<select id="sel_speed">
				<option value="2">慢</option>
				<option value="5">中</option>
				<option value="10">快</option>
			</select>
		</div>

		<div class="roll" id="roll">
			<a href="javascript:void(0);" class="btn_left"></a>
			<a href="javascript:void(0);" class="btn_right"></a>
			<div class="wrap">
				<ul>
					<li><a href="#"><img src="img/1.jpg" /></a></li>
					<li><a href="#"><img src="img/2.jpg" /></a></li>
					<li><a href="#"><img src="img/3.jpg" /></a></li>
					<li><a href="#"><img src="img/4.jpg" /></a></li>
				</ul>
			</div>
		</div>
	</body>
</html>